<template>
	<zui-box>

		<!-- 头部导航 -->
		<zui-navbar title='确认订单'></zui-navbar>

		<u-gap height="30rpx"></u-gap>
		
		<!-- //平面盒子 -->
		<view  @click="xz_go('address_opt')" >
			<zui-flat bgColor='#fff'>
				<!-- //地址列表 -->
				<zui-address :name='address.name'
					:phone='address.phone'
				  :address="address.pro_name+'-'+address.city_name+'-'+address.area_name+'-'+address.address"
				   :is_null="address==''"
				  >
				</zui-address>
			</zui-flat>
		</view>
		
		<u-gap height="30rpx"></u-gap>
		
		<!-- //商品盒子 -->

<zui-flat bgColor='#fff' v-if="list">
	
	<u-gap height="30rpx"></u-gap>
	
	
			<view class="order" >
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="good_box">
						<!-- 商品图片 -->
						<view class="good_img">
							<image mode="" :src="item.goods_thumb"></image>
						</view>
						<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
						<view class="title_wrap">
							<view class="title u-line-1">{{item.goods_name}}</view>
							
							<view class="sku" >
								
								<u-tag v-for="(val,i) in item.goods_specs.split('-')" :key='i' :text="val"
									type="warning" size="mini" plain class='tag' />
							</view>
							
							<view class="price">
								¥{{item.goods_price}}
							</view>
						</view>
					</view>
					<u-gap height="30rpx"></u-gap>
					<view class="both_ends">
						<view class="both">
							购买数量
						</view>
						<view class="ends">
							{{item.goods_num}}x
						</view>
					</view>
					<u-gap height="30rpx"></u-gap>
				</view>
				<view class="both_ends" v-if="module_id !=1 ">
					<view class="both">
						配送方式
					</view>
					<view class="ends">
						快递免邮
					</view>
				</view>
			<!-- 	<view class="both_ends" >
					
					
					
				</view> -->
				<u-gap height="30rpx"></u-gap>
				
				
				
				<view class="both_ends" v-if="module_id ==7">
					<view class="both">
						当前持有{{user_point}}金豆
					</view>
					<!-- <view class="ends">
						最大可用 {{max_pay_point}} 金豆
					</view> -->
				</view>
				
				<u-gap height="30rpx"></u-gap>
				
				<!-- <zui-flat bgColor='#fff' v-if="module_id ==7 " margin='0'>
					<u-input type="digit" v-model="g_number" @input="inputChange" placeholder="请输入金豆抵扣数量" border="none" color="#666" clearable></u-input>
				</zui-flat> -->
				
				<u-gap height="30rpx"></u-gap>
				<view class="both_ends">
					<!-- <view class="both">
						抵扣金额：<text>¥{{subtract_price}}</text>
					</view> -->
					<view class="ends">
						总价：<text>{{total_price}}金豆</text>
					</view>
				</view>
				<u-gap height="10rpx"></u-gap>
			</view>

		
		<u-gap height="30rpx"></u-gap>
		
		
			</zui-flat>


		<!-- //底部 -->

		<zui-foot v-if="list">
			<!-- 提交按钮 -->
			<zui-submit :price='show_total_price' :isDividends="true" @submit='btnClick' buttonText="结算">
				<view class="number"></view>
			</zui-submit>
		</zui-foot>
		
		<u-modal :show="show" title="" confirmColor='#606266' @confirm='confirm' :content='msg'></u-modal>


	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				info:'',//总数据
				address:'',//地址
				list:'',//商品
				number:'',//数量
				specs_id:'',//规格id
				module_id:'',//模块id
				cart_field:'',//购物车id
				specs_field:'',//规格合计
				gold_price:'',//黄金价格
				g_number:'',//积分数量
				total_price:'',//总价
				show_total_price:'',//展示的总价
				subtract_price:'',//差运算
				max_pay_point:'',//总重量
				user_point:'',//用户持有积分
				
				show:false,
				msg:''
				
			};
		},
		computed: {},
		//页面加载完毕
		onLoad(e) {
			this.cart_field= e.cart_field;
			this.specs_field= e.specs_field;
			console.log(this.cart_field,'获取的id', this.specs_field);
		},
		//每次进入页面
		onShow() {
			//获取接口
			this.step();
		},

		methods: {
			step(){
				//获取商品详情
				this.get_info();
				//获取黄金价格
				this.get_gold();
			},
			//监听输入
			inputChange(){
				// this.g_number = this.g_number.replace(/[^0-9]/g, '');
			
				
				let g_number =  this.g_number.replace(/^(0+)|[^\d]+/g, "");
				
				
				if(!g_number*1||g_number*1<0){
					
					console.log('第一层')
					this.$nextTick(()=>{
						// this.g_number=''
						this.show_total_price = this.total_price;
						this.subtract_price ='0.00';
						
					})
					
				}else if(g_number>=this.max_pay_point*1){
					
					console.log('第二层')
					this.$nextTick(()=>{
						this.g_number=this.max_pay_point+''
						this.subtract_price = this.g_number/this.gold_price; 
						this.show_total_price = this.total_price*1 - this.g_number/this.gold_price;
						
					})
					
				}else{
					console.log('第三层')
					this.subtract_price = this.g_number/this.gold_price;  
					this.show_total_price = this.total_price*1 - this.g_number/this.gold_price;
				}
				
			},
			//获取轮播图
			get_gold(){
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中 
				uni.$u.http.get('/app/setting/getSingle', {
					params: {
						group:'gold',
						key:'yuan_point_rate',
					}
				}).then(res => {
					
					this.gold_price = res.value;
					console.log('=======================',res.value);
					
				}).catch(err => {
					
				})
			},
			
			// /app/setting/getSingle
			
			get_info() {
				let obj = {}
				// 从购物车进入
				if(this.cart_field){
					obj = {
						cart_field:this.cart_field,
						specs_field:''
					}
					// 从商品详情进入
				}else{
					obj = {
						cart_field:'',
						specs_field:this.specs_field
					}
				}
				
				// 获取页面订单信息
				uni.$u.http.get('/app/order_integral/waitMakeOrder', {
					params: obj,
					custom: {
						auth: true,
						toast: false,
						catch: true,
					},
				}).then(res => {
					console.log('获取商品------------', res);
					// this.banner = res.goods_img;
					this.info = res;
					this.address = res.address;
					this.list = res.goods_specs;
					this.module_id = res.module_id
					
					this.total_price= res.total_price;
					
					this.max_pay_point= res.max_pay_point;
					this.user_point= res.user_point;
					
					
					// this.show_total_price= res.total_price;
					// this.subtract_price = '0.00'
					
					if(!this.g_number||this.g_number<1){
						
						this.show_total_price = this.total_price;
						this.subtract_price ='0.00';
						
					}else{
						this.subtract_price = this.g_number*this.gold_price; 
						
					}
					
				}).catch(err => {
					this.msg = err.msg;
					this.show=true;
				})
			
			},
			
			confirm(){
				this.xz_back()
			},
			
			
			// 结算
			btnClick() {
				console.log('this.module_id',this.module_id)
				this.user_point
				// if(this.max_pay_point*1){
				// 	if(!this.g_number||this.g_number<0){
				// 		return this.say('请输入金豆数量(整数)')
				// 	}
				// }
				if(this.user_point<this.total_price){
					return this.say('当前金豆余额不足')
				}
				
				
				//块id 1-手工艺 2- 首投商品（值得买） 3-复购商品（爆款） 4-复购商品 5-金条（奖励）
				//复购没有手续费
					// 从购物车进入
					if(this.cart_field){
						uni.navigateTo({
							url: '/pages/integral/payment?cart_field=' + this.cart_field + '&address_id='+ this.address.id +'&point_num='+this.g_number
						});
						// 从商品详情进入
					}else{
						uni.navigateTo({
							url: '/pages/integral/payment?specs_field=' +this.specs_field + '&address_id='+ this.address.id+'&point_num='+this.g_number
						});
					}
			}
		}

	}
	
</script>

<style lang='scss' scoped>
	
	/deep/.u-input__content__field-wrapper__field {
		height: 100rpx !important;
	}

	.good_box {
		display: flex;
		justify-content: flex-start;
		margin: 0 auto;

		.good_img {
			width: 176rpx;
			height: 176rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title_wrap {
			width: 440rpx;

			.title {
				text-align: left;
				font-size: 30rpx;
				color: #F1B863;
				line-height: 46rpx;
			}

			.sku {
					font-size: 24rpx;
					font-weight: 600;
					margin: 20rpx 0;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					
					.tag{
						margin-right: 20rpx;
					}
					
			
				}

			.price {
				font-size: 26rpx;
				color: #E63A2A;

				.large {
					margin-left: 6rpx;
					font-size: 30rpx;
				}
			}

			.clamp {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}

		}
	}




	.both_ends {
		display: flex;
		justify-content: space-between;
		color: #9D97A7;
		font-size: 26rpx;

		.both {
			text {
				color: #E63A2A;
			}
		}

		.ends {
			text {
				color: #E63A2A;
			}
		}
	}
	
	.number{
		color: #9D97A7;
	}
</style>
